<template>
    <div class="component">
      <div class="top">
        <span style="font-weight: bold;color: #CACACA;font-size: 14px">当前位置: </span>&nbsp;
        <router-link to="/rental" style="text-decoration-line: none;color:#7B7B7B;font-size: 14px">租车服务</router-link> >
        <router-link :to="'/carDetail/'+id" style="text-decoration-line: none;color:#7B7B7B;font-size: 14px">{{heading}}</router-link> >
        <span>在线租赁</span>
      </div>
      <div style="margin-top: 40px;padding-left:120px">
      <el-form  ref="ruleFormRef"    :rules="rules" :model="form"   label-width="130px"  >
        <el-form-item label="手机号" prop="phone">
          <el-col :span="11">
          <el-input v-model="form.phone" placeholder="请输入您的联系方式" />
          </el-col>
        </el-form-item>

        <el-form-item label="租赁方式" prop="leaseMethod">
          <el-col :span="11">
            <el-select class="m-2" @change="changMethod" v-model="form.leaseMethod" placeholder="选择租赁方式" size="large">
              <el-option label="日租"  :value="0" />
              <el-option label="月租(八折)"  :value="1" />
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item v-if="showFlag" label="月租月数" prop="monthNums">
          <el-col :span="11">
            <el-input-number  :min="1" :max="100" v-model="form.monthNums"/>
          </el-col>
        </el-form-item>

        <el-form-item v-if="!showFlag" label="租车时间" prop="rentalTime">
          <el-col :span="11">
            <el-date-picker
                v-model="form.rentalTime"
                type="date"
                placeholder="租车时间"
                style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item  v-if="!showFlag"   label="还车时间" prop="returnTime">
          <el-col :span="11">
            <el-date-picker
                v-model="form.returnTime"
                type="date"
                placeholder="还车时间"
                style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="选择待出租车辆" prop="carId">
          <el-col :span="15">
            <el-select style="width:300px;" v-model="form.carId" class="m-2" placeholder="选择该车型待出租车辆" size="large">
              <el-option
                  v-for="item in cars"
                  :key="item.id"
                  :label="item.carNum+'-'+item.modelNum+'-'+item.carColor"
                  :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>



        <el-form-item label="取车点位置" prop="pickupLocation">
          <el-col :span="11">
            <el-input v-model="form.pickupLocation" placeholder="请输入取车点位置" />
          </el-col>
        </el-form-item>

        <el-form-item >
          <el-button type="danger" @click="onSubmit(ruleFormRef)">提交订单</el-button>
          <el-button @click="getCanl">返回</el-button>
        </el-form-item>


      </el-form>
      </div>


    </div>
</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import axios from "@/axios.js"
import store from '@/store/index.js'
import {router} from "@/router/index.js";
import {ElMessage} from "element-plus";

const route = useRoute()
const vehId = ref(0)
const heading = ref("")
const id = ref(0)


onMounted(()=>{
  vehId.value = route.params.type
  heading.value = route.params.str
  id.value = route.params.id

  selectByVehId(vehId.value)
})

const form = reactive({

})

const cars = ref([])
const selectByVehId = (vehId)=>{
  axios.get(`/car/selectByVehId?vehId=${vehId}`).then(res=>{
      cars.value = res.data
  })

}

const ruleFormRef = ref(null)
const rules = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    // 还可以根据需要添加其他校验规则，比如正则校验等
  ],
  rentalTime: [
    { required: true, message: '请选择租车时间', trigger: 'change' },
  ],
  returnTime: [
    { required: true, message: '请选择还车时间', trigger: 'change' },
  ],
  carId: [
    { required: true, message: '请选择待出租车辆', trigger: 'change' },
  ],
  leaseMethod: [
    { required: true, message: '请选择租赁方式', trigger: 'change' },
  ],
  pickupLocation: [
    { required: true, message: '请输入取车点位置', trigger: 'blur' }
  ],
  monthNums:[
    { required: true, message: '请选择月租月数', trigger: 'change' },
  ]
})

const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("/order/submitOrder",form).then(res=>{
        const id = res.data.id;
        ElMessage({
          showClose: true,
          message: '恭喜你，提交订单成功',
          type: 'success',
          onClose: () => {
              getOrderPay(id)
          }
        });
      })

    } else {
      console.log('error submit!', fields)
    }
  })
}
const showFlag = ref(false)
const changMethod = (val)=>{
   if (val == 0){
      showFlag.value = false
   }else {
      showFlag.value = true
   }
}

const getOrderPay = (id)=>{
  router.push(`/orderPay/${id}`)
}
const getCanl = ()=>{
  router.push('/carDetail/'+id.value)
}

</script>


<style scoped>
  .component{
    width: 1450px;
    background-color: #F9F9F9;
  }

  .top{
    padding-left: 120px;
    padding-top: 20px;
  }
</style>